<template>
  <view class="page">
    <!-- 头部 start -->
    <fu-custom bgColor="bg-themes text-white" :isBack="true">
    	<block slot="content">热搜榜单</block>
      <block slot="right">
        <!-- <image class="fu-block-44" :src="imgBaseUrl + 'index/share.png'" mode="" @tap="showAharePopup"></image> -->
      </block>
    </fu-custom>
    <!-- 头部 end -->

    <!-- ad start -->
    <image class="w100" :src="imgs" mode="widthFix" :style="[{top:-CustomBar +'px'}]"></image>
    <!-- ad end -->

    <!-- 商品列表 start -->
    <view class="con_box padding-lr">
      <view class="box flex bg-white radius-16 margin-bottom-sm padding-sm" v-for="(item, index) in listData"  :key="index">
        <view class="ranking_num text-white text-df text-center width-44 height-44" :class="index < 3 ? 'top_' + index : ''">{{ index + 1 }}</view>
        <image class="fu-block-200 margin-right-sm radius-16" :src="item.thumb" mode="aspectFit"></image>
        <view class="flex-sub flex flex-wrap flex flex-direction justify-between">
          <view class="text-cut-2 text-df text-333">{{ item.name }}</view>
          <view class="text-sm text-999 margin-tb-16">{{ item.keywords }}</view>
          <view class="text-sm text-999 ">{{ item.sales_sum | formatNumber }} 人已购买</view>
          <view class="flex justify-between align-center margin-top-sm" style="width: 100%;">
            <view class="text-prices text-bold">
				<text>会员价</text>
              <text class="text-sm text-price"></text>
              <text class="fu-fs40">{{ item.shop_price}}</text>
            </view>
            <view class="  text-white q-btn" @click="toDetail(item)">抢购</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 商品列表 end -->
    <!-- 分页组件 start -->
    <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData" :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
    <!-- 分页组件 end -->
	<!-- 分享弹窗 -->
	<fu-share ref="share" :is_showPoter='false' :info="shareInfo" @getPosterInfo="getShareCode"></fu-share>
  </view>
</template>

<script>
/**
 * @author 刘畅
 */
  import { SHAREURL } from '@/common/config.js';
  import pagingList from '@/common/mixin/paging_list.js' //引入混合开发
  export default {
    mixins: [pagingList],
    data() {
      return {
        minixPagingListsApi: global.apiUrls.potGetHotSearch, //明细请求地址
        pageingListApiMethod: "get", //请求方法
        imgs: '', // {String} 广告图片
        // href: BASE_URL+'/pages/index/search/hot-list/index' , // {String} 分享的链接
      };
    },

    onLoad() {
      this.getImg();
    },
    filters: {
      /**
       * @function
       * @description 过滤商品整数价格
       */
      filtraInt(num) {
        return num << 0;
      },
      /**
       * @function
       * @description 过滤商品小鼠加哥
       */
      filteraFloat(num) {
        return num.toString().split('.')[1];
      }
    },
		computed: {
		  shareInfo() {
		    return {		    
		      goodsName: '热销榜单',
		      goodsImage: '',
		      thumb: '',
		      summary: '热销榜单',
		      price: '',
		      market_price: '',
		      avatar: (global.userInfo && global.userInfo.head_img) || '',
		      name: (global.userInfo && global.userInfo.user_name) || '',
		      href: this.shareUrl || SHAREURL +
		        `pages/register/index?phone=${global.userInfo && global.userInfo._mobile || 0}&invite_code=${ global.userInfo &&global.userInfo.invite_code}`, // H5地址
		      code: this.shareCode // 二维码
		    };
		  },
		},
    methods: {
      /**
       * @description  设置要请求的参数
       * 在混入开发时，调用该方法和混入的请求参数合并在一起
       */
      pagingListPostData() {
        return {
          is_hot_serach: 1
        }
      },
      /**
       * @event
       * @description 展示分享弹窗
       */
      showAharePopup() {
        this.$refs.share.open();
				return
        // #ifdef H5
        this.$message.info('请使用APP或者小程序打开应用');
        // #endif

        // #ifndef H5
        this.$refs.share.open();
        // #endif
      },
      /**
       * @event
       * @description 分享功能
       */
      shareExmple() {
        console.log('分享开始');
        this.$refs.share.init();
      },
      /**
       * @function
       * @description 广告位图片
       */
      getImg() {
        this.$api
          .post(global.apiUrls.getAds, {
            typeid: 13
          })
          .then(res => {
            console.log('广告位 ', res);
            if (res.data.code == 1) {
              this.imgs = res.data.data[0].thumb;
            }
          })
          .catch(err => {
            console.log('广告图 ERROR: ', err);
          });
      },
      /**
       * @event
       * @description 去详情页
       * @param {Object} item - 商品详情
       * @property {Object} data - 请求接口携带的数据
       * @property {Number} data.sku_id - 商品规格信息
       * @property {Number} data.goods_id - 商品id
       */
      toDetail(item) {
        let data = {
          sku_id: item.sku_id || 0,
          goods_id: item.id
        };
        uni.navigateTo({
          url: `/pages/goods/goodsdetail/goods-detail/index?${this.$util.serialize(data)}`
        });
      },
    }
  };
</script>

<style lang="scss" scoped>
// sharePopup start
.share-img{
	width: 36rpx;height: 36rpx;
}
.fu-share-box {
  width: 100%;
  height: 350rpx;
  border-radius: 32rpx 32rpx 0 0;
  .fu-share-title {
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    border-bottom: 2rpx solid #eeeeee;
    height: 110rpx;
    .fu-title-text {
      font-size: 32rpx;
    }
    .fu-title-action {
    }
  }
  .fu-pic-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 240rpx;
    .fu-share-pic {
      width: 80rpx;
      height: 80rpx;
    }
  }
}
// sharePopup end

// goodsCards start
.con_box {
  margin-top: -135rpx;
  .box {
    position: relative;
    .ranking_num {
      position: absolute;
      left: 8rpx;
      top: 8rpx;
      z-index: 9;
	  line-height: 44rpx;
	  border-radius: 8rpx;
      background-color: #9c9fa8;
    }
    .ranking_num.top_0,
    .ranking_num.top_1,
    .ranking_num.top_2 {
      background-color: rgba(0, 0, 0, 0);
      background-size: cover;
      color: rgba(0, 0, 0, 0);
    }
    .ranking_num.top_0 {
      background-image: url($IMG_BASE_URL + 'index/three-1.png');
    }
    .ranking_num.top_1 {
      background-image: url($IMG_BASE_URL + 'index/three-2.png');
    }
    .ranking_num.top_2 {
      background-image: url($IMG_BASE_URL + 'index/three-3.png');
    }
  }
}
// goodsCards end
.w100{
	position: relative;
	// top: -200rpx;
}

.q-btn{
	width: 165rpx;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	background:  url($IMG_BASE_URL+'index/btn-bg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #FFE1C6;
}

</style>
